<template>
  <div class="bargainManage">
    <div class="queryForm">
      <a-form-model :model="queryForm" layout="inline">
        <a-form-model-item label="订单号">
          <a-input v-model="queryForm.orderCode" placeholder="请输入订单号" allow-clear/>
        </a-form-model-item>
        <a-form-model-item label="用户名">
          <a-input v-model="queryForm.username" placeholder="请输入用户名" allow-clear/>
        </a-form-model-item>
        <a-form-model-item label="时间范围">
          <a-range-picker v-model="queryForm.dateTime" :show-time="{ format: 'HH:mm:ss' }"
                          valueFormat="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
                          :placeholder="['开始时间', '结束时间']"/>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="queryData" :loading="loading">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table :columns="columns" :data-source="tableData" :loading="tableLoading" :pagination="pagination"
             @change="pageChange" :rowKey="rowKey">
      <template slot="index" slot-scope="text, record,index">
        <span>{{index + 1}}</span>
      </template>
    </a-table>
  </div>
</template>

<script>
  import {
    getOederList
  } from '../../serves';

  const columns = [{
    title: '编号',
    dataIndex: 'index',
    key: 'index',
    ellipsis: true,
    scopedSlots: {
      customRender: 'index'
    },
    width: 80
  },
    {
      title: 'id',
      dataIndex: 'id',
      key: 'id',
      ellipsis: true
    },
    {
      title: '产品名称',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true
    },
    {
      title: '购买用户',
      dataIndex: 'username',
      key: 'username',
      ellipsis: true
    },
    {
      title: '购买时间',
      dataIndex: 'createTime',
      key: 'createTime',
      ellipsis: true
    },
    {
      title: '购买数量',
      dataIndex: 'power',
      key: 'power',
      ellipsis: true
    },
    {
      title: '挖矿时间',
      dataIndex: 'workStartTime',
      key: 'workStartTime',
      ellipsis: true
    },
    {
      title: '到期时间',
      dataIndex: 'workEndTime',
      key: 'workEndTime',
      ellipsis: true
    },
    // {
    //   title: '用户id',
    //   dataIndex: 'userId',
    //   key: 'userId',
    //   ellipsis: true
    // },
    // {
    //   title: '产品id',
    //   dataIndex: 'powerId',
    //   key: 'powerId',
    //   ellipsis: true
    // },
  ];
  export default {
    name: 'PromoteManage',
    data() {
      return {
        columns,
        tableLoading: false,
        loading: false,
        tableData: [],
        pagination: {
          current: 1,
          total: 0,
          pageSize: 10,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50']
        },
        lastPageSize: 10,
        queryForm: {
          orderCode: '',
          username: '',
          dateTime: []
        },
      };
    },
    mounted() {
      this.handleQuery();
    },
    methods: {
      rowKey(record, index) {
        return index;
      },
      queryData() {
        this.loading = true
        this.handleQuery();
      },
      handleQuery() {
        let params = {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          orderCode: this.queryForm.orderCode,
          username: this.queryForm.username,
          startTime: this.queryForm.dateTime[0],
          endTime: this.queryForm.dateTime[1]
        };
        this.tableLoading = true;
        getOederList(params).then((res) => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.tableData = res.data.data.records;
            this.pagination.total = res.data.data.total;
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message);
            this.$router.push({
              path: '/manageLogin'
            });
          } else {
            this.$message.warning(res.data.message);
          }
          this.tableLoading = false;
          this.loading = false
        });
      },
      pageChange(val) {
        this.pagination.pageSize = val.pageSize;
        if (val.pageSize != this.lastPageSize) {
          this.pagination.current = 1;
          this.lastPageSize = val.pageSize;
        } else {
          this.pagination.current = val.current;
        }
        this.handleQuery();
      }
    }
  };
</script>

<style lang="scss">
  .bargainManage {

    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 10px;
    }
  }
</style>
